<template>
    <div>
        <!--购物车如果未登录提示消息-->
        <div class="shopping-cart-notice" v-show="loginStatue">
            为方便您购买，请提前登录
            <router-link to="/login" style="color: #FF6700">立即登陆</router-link>
            <a href="#" class="el-icon-close"></a>
        </div>

        <div class="combine">
            <!--商品图片以及购买功能-->
            <div class="shopping-cart-goods">
                <!--左侧轮播图-->
                <div class="img-left">
                    <img :src="picAddress+xiaoMiProd.prodPic" width="500px" height="500px" alt="图片加载失败...">
                </div>

                <!--右侧购物车-->
                <div class="shopping-cart">
                    <h2 class="prod-title">{{ xiaoMiProd.prodTitle }}</h2>
                    <p class="prod-desc">
                        <font class="prod-desc">「信用卡分期至高立省216元；赠897元善诊体检卡套餐 」</font>
                        {{ xiaoMiProd.prodService }}
                    </p>
                    <p class="prod-title"><font class="prod-desc"
                                                style="font-size: 14px; font-weight: 700">{{
                            xiaoMiProd.prodSupplier
                        }}</font>
                    </p>

                    <!--产品价格-->
                    <div class="prod-price prod-title">
                        <span
                            style="font-size: 18px;color: #FF6700">{{
                                prodDetailList[selectedProdIndex].prodPriceCurrent
                            }}元</span>&nbsp;
                        <del style="font-size: 14px;color: #B0B0B0">
                            {{ prodDetailList[selectedProdIndex].prodPricePre }}元
                        </del>
                    </div>
                    <!--              <hr class="split-line">-->
                    <div class="split-line"></div>
                    <br>
                    <div>
                        <i></i>
                        <div class="prod-address">
                            <div class="el-icon-location-outline">
                                <span>{{ shoppingAddress.province }}</span>
                                <span>{{ shoppingAddress.city }}</span>
                                <span>{{ shoppingAddress.district }}</span>
                                <span>{{ shoppingAddress.detail }}</span>
                                <a href="#" class="edit" @click="dialogVisible = true">修改</a>
                                <p>该地区暂时缺货</p>
                            </div>
                        </div>
                    </div>
                    <!--弹出对话框-->
                    <el-dialog
                        class="dialog-address"
                        :visible.sync="dialogVisible"
                        width="660px"
                        :before-close="handleClose">
                        <div class="close_cross" @click="dialogVisible=false">X</div>
                        <div>
                            <el-input
                                class="prod-address-input"
                                :class="{'el-icon-circle-close': addressKeyWords}"
                                placeholder="输入街道、乡镇、小区或商圈名称"
                                v-model="addressKeyWords"
                            >
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                            <br>
                            <em v-show="!addressKeyWords">没有找到这个地方,手动选择></em>

                            <div class="prod-address-select" v-show="!addressKeyWords">
                                <span>手动选择地址></span>
                            </div>

                            <div class="prod-address-info">
                                <div v-if="loginStatue" class="my-quick-login">
                                    现在
                                    <em @click="quickLogin">登录</em>
                                    ,可根据收货地址快速定位
                                </div>
                            </div>
                            <!--展示我的收货地址, 输入时隐藏-->
                            <div v-show="!addressKeyWords">
                                <div class="my-address-title">
                                    <span>我的收货地址</span>
                                </div>
                                <div class="my-address">
                                    <span class="my-address-name">李著兵 山西</span>
                                    <span class="my-address-detail">江苏省 南通市 开发区 星海花园</span>
                                </div>
                                <div><&nbsp;&nbsp;&nbsp;&nbsp;1/1&nbsp;&nbsp;&nbsp;&nbsp;></div>
                            </div>


                            <!--搜索地址时, 展示地址可选列表-->
                            <div v-show="addressKeyWords" class="my-address-search">
                                <ul>
                                    <li @mouseenter="itemVisible = !itemVisible" @mouseleave="itemVisible=false">
                                        <div class="my-address-item">
                                            <div style="width: 200px; float: left">
                                                <div>南通市</div>
                                                <div>江苏省 南通市 崇川区{{ itemVisible }}</div>
                                            </div>
                                            <!--                                            <a href="#" :class="{'item-active': itemVisible}">选择</a>-->
                                            <!--                                            //, 'animate__animated animate__bounceInLeft':itemVisible-->
                                            <a href="#"
                                               :class="{'animate__animated animate__fadeOutLeftBig': !itemVisible, 'animate__animated animate__bounceInLeft': itemVisible}">选择</a>
                                        </div>
                                    </li>
                                    <li>日本</li>
                                    <li>数据</li>
                                    <li>手动</li>
                                    <li>双方都</li>
                                    <li>水电费</li>
                                </ul>
                            </div>


                            <!--                            <span slot="footer" class="dialog-footer">-->
                            <!--                            <el-button @click="dialogVisible = false">取 消</el-button>-->
                            <!--                            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
                            <!--                                </span>-->
                        </div>
                    </el-dialog>

                    <!--选择商品参数组件-->
                    <div>
                        <ProdChoice :itemId="1" ref="item1" :choices="prodDetailList" @sendMessage="receive">选择版本
                        </ProdChoice>
                        <ProdChoice :itemId="2" ref="item2" :choices="prodColor">选择颜色</ProdChoice>
<!--                        <ProdChoice :itemId="3" ref="item3" titles="选择套装" :choices="responseInfo"/>-->
                    </div>

                    <!--选择商品售后服务组件-->
                    <div class="prod-service">
                        <prod-service serviceTitle="选择小米提供的尊享服务" :serviceList="1"/>
                        <ProdService serviceTitle="选择小米提供的意外保护" :serviceList="2"/>
                        <prod-service serviceTitle="选择小米提供的延长保修" :serviceList="1"/>
                        <prod-service serviceTitle="选择小米提供的云空间服务" :serviceList="4"/>
                    </div>

                    <!--购物按钮-->
                    <div class="prod-submit">
                        <div>
                            <h3 class="prod-info">{{ xiaoMiProd.prodTitle }} 8GB+256GB 陶瓷黑5499元5999元</h3>
                            <h3 class="prod-sum-price">总计：{{ prodDetailList[selectedProdIndex].prodPriceCurrent }}元</h3>
                        </div>
                    </div>

                    <!--加入购物车-->
                    <div class="prod-trade">
                        <button class="prod-to-car" @click="addCart()">
                            加入购物车
                        </button>
                        <a href="#" class="prod-like">
                            <em class="el-icon-pear">喜欢</em>
                        </a>
                    </div>

                    <div>
                        <a href="#" class="el-icon-circle-check">小米自营</a>
                        <a href="#" class="el-icon-circle-check">小米发货</a>
                        <a href="#" class="el-icon-circle-check">7天无理由</a>
                        <a href="#" class="el-icon-circle-check">退货运费说明</a>
                        <a href="#" class="el-icon-circle-check">企业信息售后服务政策</a>
                        <a href="#" class="el-icon-circle-check">7天价格保护</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import ProdChoice from "./ProdChoice";
    import ProdService from "./ProdService";
    import {getProdList, getProdColor} from '@/api/shoppingCart';
    import {getInfo} from "@/api/login";
    import {getAddress} from "../../api/user";
    import 'animate.css';
    import {add} from "../../api/Cart";

    export default {
        name: "ShoppingCart",
        components: {ProdChoice, ProdService},
        data() {
            return {
                picAddress: process.env.VUE_APP_BASE_API,
                itemVisible: false,
                addressKeyWords: '',
                dialogVisible: false,
                xiaoMiProd: {},
                prodDetailList: [],
                prodId: this.$route.query.id,
                selectedItem: 1,
                prodColor: [],
                selectedProdIndex: 0,
                loginStatue: false, //登录状态, 默认为false
                shoppingAddress:
                    {
                        province: '',
                        city: '',
                        district: '',
                        detail: '',
                    }
            }
        },
        created() {
            this.getList();
            this.getLoginStatue();
            this.getAddress_1();
            console.log(this.selectedProd.prodPricePre)
        },
        methods: {
            addCart() {
                if (!this.$refs.item1.uid) {
                    alert("型号必选！")
                } else {
                    add(this.$refs.item1.uid).then(response => {
                        if (response.message) {
                            this.$router.push("/Cart")
                        } else {
                            this.$message.error("添加失败，请重试")
                        }
                    })
                }

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            getAddress_1() {
                getAddress().then(res => {
                    this.shoppingAddress = res;
                    this.shoppingAddress.province = this.shoppingAddress.address[0].province
                    this.shoppingAddress.city = this.shoppingAddress.address[0].city
                    this.shoppingAddress.district = this.shoppingAddress.address[0].district
                    this.shoppingAddress.detail = this.shoppingAddress.address[0].detail
                })
            },
            getList() {
                //axios
                getProdList(this.prodId).then(response => {
                    this.xiaoMiProd = response.xiaoMiProd;


                    this.prodDetailList = response.xiaoMiProdDetailList;
                    // console.log("@",this)
                    this.$refs.item1.updatePage(this.prodDetailList);
                    this.$refs.item2.updatePage(this.prodColor);
                })

                getProdColor(this.prodId, this.uid).then(response => {
                    this.prodColor = response;
                })
            },
            changeSelected(e) {
                this.selectedItem = e
            },
            receive(selectedProdIndex) {
                this.selectedProdIndex = selectedProdIndex;
            },
            getLoginStatue() {
                getInfo().then(response => {
                    this.loginStatue = (response.user.status === 0);
                })
            },
            quickLogin() {
                alert("Login")
            }
        }
    }
</script>
<style scoped>

    /*清除自带边距*/
    * {
        margin: 0;
        padding: 0;
    }

    /*实现页面加载出来后, 默认选中第一个框*/
    .prod-box {
        list-style: none;
        width: 286px;
        height: 42px;
        text-align: center;
        border: 1px #e0e0e0 solid;
        display: inline-block;
        margin: 10px 12px 0 0;
    }

    /*.prod-box:hover{*/
    /*    color: #FF6700;*/
    /*    border: 1px #FF6700 solid;*/
    /*}*/

    /*.active{*/
    /*    border: 1px #FF6700 solid;*/
    /*}*/

    .prod-box a {
        font-size: 16px;
        font-weight: 400;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        color: #757575;
        line-height: 42px;
        text-decoration: none;
    }

    /*购物车未登录提示信息*/
    div .shopping-cart-notice {
        height: 50px;
        line-height: 50px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        background-color: #f7f7f7;
        /*box-shadow:0px 0px 7px #A9A9A9;*/
    }

    /*图片左侧展示*/
    .shopping-cart-goods .img-left {
        float: left;
        width: 560px;
    }

    /*修改element-ui默认样式*/
    /*.img-left .el-carousel__arrow--right{*/
    /*    right: 100px;*/
    /*}*/

    /*控制轮播图样式, 默认箭头在鼠标hover时显示*/
    .el-carousel__item:nth-child(2n) {

    }

    /*默认左右自动切换*/
    /*.el-carousel__item:nth-child(2n+1) {*/

    /*}*/

    /*购物车右侧*/
    .shopping-cart-goods .shopping-cart {
        float: right;
        width: 600px;
        height: 2478px;
    }

    /*全部购物信息居中*/
    .shopping-cart-goods {
        width: 1280px;
        margin: 43px auto;
    }

    /*商品介绍信息*/
    .shopping-cart-goods .shopping-cart p {
        margin-top: 20px;
        font-size: 14px;
        color: #B0B0B0;
    }

    /*商品价格信息*/
    .shopping-cart-goods .shopping-cart .prod-price {
        margin-top: 10px;
    }

    /*分割线样式*/
    .shopping-cart-goods .shopping-cart .split-line {
        width: 600px;
        margin-top: 12px;
        border-bottom: 1px solid #e0e0e0;
    }

    /*地址框样式*/
    .shopping-cart .prod-address {
        width: 573px;
        height: 68px;
        border: 1px solid #DADADA;
        background: #FAFAFA;
        text-align: left;
        padding: 20px 0 0 25px;
        line-height: 68px;
    }

    /*地址框内部字体样式*/
    .shopping-cart .prod-address {
        font-size: 14px;
    }

    /*地址*/
    .shopping-cart .prod-address .el-icon-location-outline span {
        padding: 8px;
    }

    .shopping-cart .prod-address .el-icon-location-outline a {
        text-decoration: none;
        color: #FF6700;
    }

    .shopping-cart .prod-address .el-icon-location-outline p {
        margin-top: 5px;
    }


    .shopping-cart-notice a {
        text-decoration: none;
    }

    .shopping-cart h2 {
        font-size: 24px;
        font-weight: 700;
    }

    .prod-desc {
        text-align: left;
        color: #FF4A00;
    }

    /*购物信息展示按钮*/
    .prod-submit {
        width: 598px;
        height: 145px;
        list-style: none;
        border: 1px solid #e0e0e0;
        text-align: left;
    }

    .prod-submit .prod-sum-price {
        font-size: 24px;
        color: #FF6700;
    }

    .prod-submit .prod-info {
        margin: 50px 0 0 20px;
        font-weight: 400;
    }

    .prod-submit .prod-sum-price {
        margin: 10px 0 0 20px;
    }

    .prod-trade {
        margin-top: 20px;
    }

    .prod-trade .prod-to-car {
        width: 300px;
        height: 53px;
        display: inline-block;
        border: 1px solid #FF6700;
        background-color: #FF6700;
        color: whitesmoke;
        font-size: 16px;
    }

    .prod-trade a {
        text-decoration: none;
    }

    .prod-trade em {
        font-style: normal;
        line-height: 53px;
        font-size: 16px;
        color: white;
    }

    .prod-trade .prod-like {
        margin-left: 20px;
        width: 142px;
        height: 54px;
        display: inline-block;
        background-color: #FF6700;
    }

    .el-icon-circle-check {
        margin-top: 10px;
        text-decoration: none;
        color: #B0B0B0;
        font-size: 14px;
    }

    /*修改弹窗样式*/
    /deep/ .el-dialog {
        height: 400px;
    }

    /*弹窗头样式去除*/
    /deep/ .el-dialog__header {
        display: none;
    }

    /*弹窗内输入框样式*/
    .dialog-address .prod-address-input {
        border: 1px solid #e0e0e0;
        outline: none;
    }

    /deep/ .el-input {
        width: 580px;
    }

    /*输入框边框样式*/
    /deep/ .el-input__inner {
        border-radius: 0;
    }

    /deep/ .el-input__inner:focus {
        border-color: #FF6700;
        outline: 0;
    }

    /*弹窗body*/
    /deep/ .el-dialog__body {
        height: 340px;
    }

    .close_cross {
        width: 24px;
        height: 24px;
        top: 8px;
        right: 8px;
        font-size: 16px;
        font-weight: 600;
        line-height: 30px;
        color: #757575;
        cursor: pointer;
        position: absolute;
    }

    .close_cross:hover {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        color: white;
        font-size: 18px;
        background-color: #cb1818;
    }

    .prod-address-select {
        width: 582px;
        height: 62px;
        margin: 0 auto;
        overflow: hidden;
        line-height: 62px;
    }

    .prod-address-select span {
        float: right;
        font-size: 14px;
        color: #b0b0b0;
    }

    .prod-address-select span:hover {
        color: #FF6700;
    }

    .prod-address-info {
        width: 582px;
        margin: 0 auto;
        overflow: hidden;
    }

    .prod-address-info .my-address-title {
        overflow: hidden;
    }

    .prod-address-info .my-address-title span {
        float: left;
        height: 24px;
        font-size: 16px;
        color: #b0b0b0;
    }

    .my-quick-login em {
        cursor: pointer;
        font-style: normal;
        color: #FF6700;
    }

    .my-address {
        width: 290px;
        height: 68px;
        overflow: hidden;
    }

    .my-address span {
        margin-left: 30px;
        display: block;
        text-align: left;
    }

    .my-address:hover {
        background-color: #f5f5f5;
    }

    .my-address .my-address-name {
        margin-top: 12px;
        font-size: 14px;
        display: block;
    }

    .my-address .my-address-detail {
        font-size: 12px;
        color: #b0b0b0;
    }

    /*输入框中x图标样式*/
    .el-icon-circle-close:before {
        content: "\e78d";
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-7px);
    }

    /*地址搜索选择列表样式*/
    .my-address-search {
        margin: 0 auto;
        padding: 0;
        width: 580px;
        height: 260px;
        text-align: left;
        background-color: #f0f0f0;;
    }

    .my-address-search ul li {
        width: 530px;
        height: 60px;
        padding: 10px 0;
        position: relative;
        cursor: pointer;
        list-style: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .my-address-search ul li .my-address-item {
        overflow: hidden;
    }

    .my-address-search ul li .my-address-item a {
        width: 100px;
        height: 32px;
        position: absolute;
        /*top: 50%;*/
        right: 0;
        /*transform: translate(0, -50%);*/
        text-align: center;
        line-height: 32px;
        text-decoration: none;
        background: #ff6700;
        border-color: #ff6700;
        color: #f0f0f0;
        /*transition: right .3s;*/
    }

    /*.my-address-search ul li .my-address-item .item-active{*/
    /*    right: 0;*/
    /*    display: block;*/
    /*    background-color: #ff6700;*/
    /*}*/

</style>

<style>
    .shopping-cart .prod-title {
        width: 573px;
        height: 25px;
        text-align: left;
        font-size: 18px;
        margin-top: 20px;
        line-height: 25px;
        color: #333333;
    }
</style>
